<template>
  <navIn></navIn>
<!--  以下为表格操作-->
  <el-table
      ref="multipleTable"
      :data="data"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        type="index"
        :index="indexMethod">
    </el-table-column>
    <el-table-column
        prop="regional"
        label="地区部"
        width="120">
    </el-table-column>
    <el-table-column
        prop="name"
        label="商品"
        width="120">
    </el-table-column>
    <el-table-column
        prop="yesterDayPrice"
        label="昨日价格"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="todayPrice"
        label="今日价格"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="priceRate"
        label="价格浮动比"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="priceNum"
        label="涨价数量"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="proportion"
        label="涨价占比"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="releaseTime"
        label="上架时间"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="offTime"
        label="下架时间"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="isRelease"
        label="是否上架"
        show-overflow-tooltip>
    </el-table-column>
    //表格栏最后的操作选项_______________________________________________________________
    <el-table-column
        fixed="right"
        label="操作"
        width="220">
      <el-button type="text" @click="dialogFormVisible = true">查看</el-button>
      <el-dialog title="收货地址" v-model="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

        <el-button type="text" size="small">编辑</el-button>
        <el-button type="text" size="small">下架</el-button>
        <el-button type="text" size="small">删除</el-button>

    </el-table-column>
  </el-table>
<!--底部页面数目显示-->
  <div class="block">

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="handleCurrentChange"
        :page-sizes="[5,10,15,30]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.length">
    </el-pagination>
  </div>

</template>

<script>
import testData from "../data/data.json"
import navIn from '../components/Nav.vue'
export default {
  components: {
    navIn
  },
  data() {
    const data = [];
    return {
      data,

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      multipleSelection: [],
      // dialogVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }

  },
  created(){
    //修改的data值为JSON文件中想要的数据
    this.data = testData.data;
  },
  methods: {
    //点击按钮
    // onSubmit() {
    //   console.log('submit!');
    // },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //用于表格
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //表格数目排序显示
     indexMethod(index) {
        return index +1;
      },
    //表格的操作栏
    handleClick(row) {
      console.log(row);
    },
    //底部总条数计算
    handleSizeChange(size) {
      this.pagesize = size;
      console.log(`当前页: ${this.pagesize}`);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(`当前页: ${currentPage}`);
    },
    //关闭弹出信息详情框的确认与否
    // handleClose(done) {
    //   this.$confirm('确认关闭？')
    //       .then(_ => {
    //         done();
    //       })
    //       .catch(_ => {});
    // }
  },



}
</script>

<style scoped>

</style>